<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<ul class="list">
			<li>
				物品名称 --- 物品单价
			</li>
		</ul>
		
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>
			
			// 记住
			/* $.ajax({
				url: "请求的的功能路径" => uri https://baike.baidu.com/item/URI/2901761
				type: get | post
				      
					  区别
					  get =>  一般用于从服务器端获取数据（获取文章信息、文章列表、产品信息） 
					  post => 一般用于从服务器端修改数据（登录、注册、添加产品）
					          文件上传时(图片、文件、音视频)，必须用post
				dataType: json | xml | text
				data: {}, 
				timeout: 2000,
				success: function(){ 
					// 请求成功时
					http状态码=>200
					1xx 
					2xx 200
					3xx 301 302
					4xx 403 404
					5xx 500 503
					https://www.cnblogs.com/xflonga/p/9368993.html
				},
				error: function(){
					// 请求失败
					// 最常见的请求失败=>请求超时
				},
				complete: function(){
					
				}
			}) */
			
			/* 
				
				作业：
					演示地址 http://chonghekj.com/ajax%20crud.html
			 
			*/
		     var pageSize = 15;
			 var pageNum = 2;
			
			$.ajax({
				url: 'http://chonghekj.com/crud/index.php/Home/Index/getItemList',
				type: 'get',
				dataType: 'json',
				data: {
					pageNumber: pageNum,
					pageSize: pageSize
				},
				timeout: 2000,
				success: function(res){
					console.log(res)
					var html = '';
					for(var i=0; i<res.rows.length; i++){
						html = '<li>'+res.rows[i].item_name+"---"+res.rows[i].item_price+'</li>';
						$('.list').append(html);
					}
				}
			})
			
			
			
		</script>
	</body>
</html>
